<template>
  <div class="string-box">
    <button @click="reverse">翻转</button>
    <button @click="double">加倍</button>
    <slot>default slot</slot>
  </div>
</template>

<script>
export default {
  props: ['value'],
  methods: {
    reverse() {
      const newValue = this.value.split('').reverse().join('');
      // input 是自定义事件名称
      this.$emit('input', newValue);
    },
    double() {
      const newValue = this.value + this.value;
      this.$emit('input', newValue);
    }
  }
}
</script>

<style lang="sass" scoped>
.string-box
  display: inline-block
  padding: 10px
  border: 1px solid #333
</style>
